<template>
  <div class="page-account">
    <div class="page-account-container">
      <div class="page-account-top">
        <div class="page-account-top-logo">
          <img src="" alt="logo">
        </div>
        <div class="page-account-top-desc">企业级中后台前端解决方案</div>
      </div>
      <Login ref="form" @on-submit="handleSubmit">
        <Email name="mail" />
        <Poptip trigger="focus" placement="right" width="240">
          <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写"
            @on-change="handleChangePassword" />
          <template #content>
            <div class="page-account-register-tip">
              <div class="page-account-register-tip-title" :class="passwordTip.class">
                强度：{{ passwordTip.strong }}
              </div>
              <Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
              <div class="page-account-register-tip-desc">
                请至少输入 6 个字符。请不要使用容易被猜到的密码。
              </div>
            </div>
          </template>
        </Poptip>
        <Password name="passwordConfirm" :rules="passwordConfirmRule" placeholder="确认密码" />
        <Mobile name="mobile" />
        <Captcha name="captcha" :field="['mobile']" enter-to-submit @on-get-captcha="handleGetCaptcha" />
        <Submit>注册</Submit>
      </Login>
      <div class="page-account-to-login">
        <router-link :to="{ name: 'login' }">使用已有账户登录</router-link>
      </div>
    </div>
    <i-copyright />
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import iCopyright from '@/components/copyright'

export default {
  name: 'page-account-register',
  components: { iCopyright },
  data() {
    // 二次校验密码
    // 因为 View UI Plus 的表单控件省去了对数据的绑定，因此需要通过 ref 从 Login 组件中获取数据
    // 下面的 formValidate.password 中的 password，指的是给 <Password> 组件设置的 name="password"
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.$refs.form.formValidate.password) {
        callback(new Error('两次输入的密码不匹配！'));
      } else {
        callback();
      }
    };

    return {
      passwordRule: [
        { required: true, message: '密码不能为空' },
        { min: 6, message: '密码不能少于6位' }
      ],
      passwordConfirmRule: [
        { required: true, message: '确认密码不能为空' },
        { validator: validatePassCheck }
      ],
      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0
    }
  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = '强';
      let className = 'strong';
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = '#19be6b';

      if (this.passwordLen < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
      } else if (this.passwordLen < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
      }

      return {
        strong,
        class: `page-account-register-tip-${className}`,
        percent: percent * 10,
        color
      }
    }
  },
  methods: {
    ...mapActions('admin/account', [
      'register',
      'login'
    ]),
    handleChangePassword(val) {
      this.passwordLen = val.length;
    },
    /**
     * @description 注册
     * 表单校验已有 View UI Plus 自动完成，如有需要修改，请阅读 View UI Plus 文档
     */
    handleSubmit(valid, values) {
      if (valid) {
        if (valid) {
          const { mail, password, mobile, captcha } = values;
          this.register({
            mail,
            password,
            mobile,
            captcha
          }).then(() => {
            this.$router.replace({ name: 'register-result' });
          });
        }
      }
    },
    /**
     * @description 获取验证码
     * */
    handleGetCaptcha() {
    }
  }
};
</script>
<style lang="less">
@import "../account";
</style>
